<template>
  <view>
    <view >
      <view class="f_row_center">
        <view @click="back_click" v-if="isShowBack" class="f_row_center" style="height: 77rpx;padding: 0rpx 30rpx">
          <image src="/static/back_white.png" style="height: 38rpx;width: 22rpx;"/>
        </view>
        <view v-else style="width: 30rpx"></view>
        <view class="item_search_cls f_row_center flex_1">
          <view @click="getFocus" class="flex_1 f_row_center" style="height: 66rpx;">
            <view class="flex_1"/>
            <image src="/static/black_search.png" style="height: 32rpx;width: 32rpx;margin:0 20rpx"/>
          </view>
          <input @blur="()=>{
          this.isFocus=false;
        }" :focus="isFocus" class="flex_1" v-model="contentStr" type="text" :placeholder="searchHint"
                 placeholder-style="font-size:28rpx;color: #666666;"
                 style="padding-right:50rpx" @confirm="confirmValue"/>

        </view>
      </view>
    </view>
  </view>

</template>

<script lang="ts">
import {Prop, Vue, Component} from "vue-property-decorator";
import XRouterConfig from "@/api/XRouterConfig";

@Component({
  components: {}
})
export default class ItemSearchView  extends Vue {

  @Prop({
    default: true,
  }) isShowBack?: boolean

  @Prop() searchHint?: boolean;
  contentStr = "";
  isFocus = false;

  getFocus() {
    this.isFocus = true;
  }

  back_click() {
    XRouterConfig.back(0)
    this.$emit("back");
  }

  confirmValue(event: any) {
    let value = event.detail.value;
    this.$emit("search", value)
  }

}
</script>

<style scoped>
.item_search_cls {
  background: #F6F6F6;
  border-radius: 38rpx;
  height: 66rpx;
  border: 1px solid #F6F6F6;
  color: #666666;
  margin-right: 30rpx;
}

.head_search {
  width: 100vw;
  height: 176rpx;
  position: fixed;
  z-index: 1;
}
</style>